import React, { FC } from "react"
import { Space, Tabs } from "antd"
import { AppstoreOutlined, BarsOutlined } from "@ant-design/icons"
import CompponentLib from "./ComponentLib"
import Layers from "./Layers"

const LeftPanel: FC = () => {
    const tabsItems = [
        {
            key: "componentLib",
            label: (
                <span>
                    <Space size={10}>
                        <AppstoreOutlined />
                        组件库
                    </Space>
                </span>
            ),
            children: <CompponentLib />
        },
        {
            key: "layers",
            label: (
                <span>
                    <Space size={10}>
                        <BarsOutlined />图 层
                    </Space>
                </span>
            ),
            children: <Layers />
        }
    ]
    return <Tabs centered tabBarGutter={50} defaultActiveKey="componentLib" items={tabsItems} />
}

export default LeftPanel
